<template>
  <el-container class="home-container">
    <el-header><!-- 头部区 -->
      <div>
        <img :src="require('@/assets/png/planeLogo.png')" alt="" height="50px"/>
        <span>航班后台管理系统</span>
      </div>
      <div>
        <img :src="AdminInfo.avatar" alt="" height="50px"/>
        <span>{{ AdminInfo.name }},欢迎使用</span>
      </div>

      <div>
        <router-link to="/" class="el-icon-error el-tag" style="margin: 30px" @click="logout">退出</router-link>
        <router-link to="/home" class="el-icon-s-home el-tag">主页</router-link>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '240px'">
        <!-- 折叠条 -->
        <div class="toggle-button" @click="toggleCollapse()">{{ isCollapse ? '展开列表' : '收起列表' }}</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409BFF" :router="true"
                 :collapse="isCollapse" :collapse-transition="false"
                 :default-openeds="openeds">
          <!--openeds是一个数组（当前打开的sub-menu的 index数组）-->

          <!--一级菜单-->
          <template v-for="item in menuList">
            <el-submenu
              v-if="item.children.length >0" :index="item.id" :key="item.id">
              <template slot="title">

                <span>{{ item.pathName }}</span>
              </template>

              <!--二级菜单-->
              <template v-for="itemChild in item.children">
                <el-submenu :index="itemChild.path" :key="itemChild.id">
                  <template slot="title">
                    <i :class="itemChild.pathIcon"></i>
                    <span>{{ itemChild.pathName }}</span>
                  </template>


                  <!--三级菜单-->
                  <el-menu-item v-for="itemChild_child in itemChild.children" :index="itemChild_child.path"
                                :key="itemChild_child.id">
                    <template slot="title">
                      <i :class="itemChild_child.pathIcon"></i>
                      <span>{{ itemChild_child.pathName }}</span>
                    </template>
                  </el-menu-item>
<!--                  TODO 逃不了的bug，来只是迟早的事，看来还要搞一波前端递龟 我🐢都被玩坏了-->
                  <!--                  接着加一层，不好使，不能知道哪个是最后一层-->
                  <!--<template v-for="itemChild_child_children in itemChild_child.children">
                      <el-submenu :index="itemChild_child_children.path"
                                  :key="itemChild_child_children.id">
                        <template slot="title">
                          <i class="el-icon-menu"></i>
                          <span>{{itemChild_child_children.pathName}}</span>
                        </template>
                      </el-submenu>
                    </template>-->

                </el-submenu>


              </template>

            </el-submenu>

          </template>


        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import admin from "@/api/acl";


export default {

  data() {
    return {
      openeds: ['1'],
      AdminInfo: {
        avatar: require('@/assets/png/defaultAvatar.png'),
        name: '',
      },
      //左侧菜单数据
      menuList: [],
      isCollapse: false
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      /**
       * @description 获得用户信息存为token
       */
      admin.getUserInfo()
        .then(response => {
          this.AdminInfo.name = response.data.admin.name
          this.AdminInfo.avatar = response.data.admin.salt
          let userid = response.data.admin.id
          /**
           * @description 得到用户路由
           */
          admin.getUserRoute(userid)
            .then(response => {
              this.menuList = response.data.route
            })

        })
    },
    logout() {
      window.localStorage.clear();
      this.$router.push('/login');
    },

    //点击按钮，切换菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse == false) {
        this.openeds.push(1)      //  保持列表打开

      }
    }

  }
};
</script>

<style lang="less" scoped>

.home-container {
  //后续改成100%
  height: 1000px;

}

.el-header {
  background-color: #373d41;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
  align-items: center; //元素上下居中（防止右边按钮贴上下边）
  color: #fff;
  font-size: 20px;

  > div { //内嵌的div样式
    display: flex;
    align-items: center; //Logo和文字上下居中
    span {
      margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
    }
  }
}

.el-aside {
  background-color: #333744;

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #eaedf1;
}

.toggle-button {
  background-color: #4A5064; //背景色(浅灰)
  font-size: 10px; //字体大小10像素
  line-height: 24px; //行高24像素
  color: #fff; //字体颜色白色
  text-align: center; //字体居中
  letter-spacing: 0.2em; //字体之间的距离
  cursor: pointer; //鼠标的形状（手形）
}
</style>
